<template>
  <!-- 满屏容器 -->
  <div class="list-container">
    <div class="nav-space">
      <van-nav-bar fixed
                   title="审核详情"
                   left-arrow
                   @click-left="$router.go(-1)">
      </van-nav-bar>
    </div>
    <!-- 审核头部 -->
    <div class="audit-top-wrap">
      <div class="auditIcon">
        <img :src="auditInfo.icon" />
      </div>
      <div class="auditStatus">{{auditInfo.text}}</div>
      <div class="auditStatusDescription">{{auditInfo.subtitle}}</div>
      <!-- <span class="auditLog"
            @click="$router.push({name: 'auditLog', query: $route.query})">审核记录</span> -->
      <van-button plain
                  hairline
                  class="auditLog"
                  type="primary"
                  @click="$router.push({name: 'auditLog', query: $route.query})">审核记录 ></van-button>
    </div>
    <div class="split"></div>
    <!-- 审核步骤 -->
    <div class="audit-step-wrap">
      <span class="audit-step-title">审核步骤</span>
    </div>
    <div class="step">
      <van-skeleton :row="3"
                    v-for="i in skeletonRepeat"
                    :key="i"
                    :loading="skeletonLoading">
        <div v-for="(item, index) in auditList"
             :key="index"
             class="step-wrap">
          <div class="title"
               :style="{color: activeColor(item.type)}">{{item.role}}</div>
          <div class="subtitle">
            <span></span>
            <span></span>
          </div>
          <div class="circle-container">
            <img :src="activeIcon(item.type)" />
          </div>
          <div class="line"
               :class="index === auditList.length - 1 ? 'last' : ''"></div>
        </div>
        <!-- 空状态 -->
        <van-empty description=""
                   v-if="auditList.length === 0">
          <template #image>
            <div class="empty-image">
              <img src="/images/detail/icon_empty.png" />
            </div>
          </template>
        </van-empty>
      </van-skeleton>
    </div>

  </div>
</template>
 
<script>
import { getAuditDetail } from "@/api/request/business"
import { onMounted, reactive, computed, toRefs, inject } from 'vue'
import { getSkeletonInstance } from '@/hooks/useSkeleton'
import { audit } from "../../api/request/business"
export default {
  props: {
    id: {
      type: String,
      required: true
    },
    beanId: {
      type: String,
      required: true
    },
    checkstatus: {
      type: String,
      required: true
    }
  },
  setup (props) {
    const auditStrategy = {
      pass: {
        text: '审核通过',
        icon: 'images/audit/icon_audit_success.png',
        activeIcon: 'images/audit/icon_audit_success_icon.png',
        subtitle: '恭喜您, 审核通过~',
        textColor: '#28BA8E'
      },
      notpass: {
        text: '审核不通过',
        icon: 'images/audit/icon_audit_faild.png',
        activeIcon: 'images/audit/icon_audit_faild_icon.png',
        subtitle: '很抱歉，请核对后重新提交',
        textColor: '#EA2F2F'
      },
      auditing: {
        text: '审核中',
        icon: 'images/audit/icon_audit_waiting.png',
        activeIcon: 'images/audit/icon_audit_waiting_icon.svg',
        subtitle: '管理员加急审核中，请您耐心等待',
        textColor: '#FF8B36'
      },
      tovoid: {
        text: '已作废',
        icon: 'images/audit/icon_audit_waiting.png',
        activeIcon: 'images/audit/icon_audit_waiting_icon.svg',
        subtitle: '已经作废，请重新提交审核',
        textColor: '#FF8B36'
      },
      saved: {
        text: '暂存',
        icon: 'images/audit/icon_audit_waiting.png',
        activeIcon: 'images/audit/icon_audit_waiting_icon.svg',
        subtitle: '请及时提交',
        textColor: '#FF8B36'
      },
      todo: {
        text: '待办',
        icon: '',
        activeIcon: 'images/audit/icon_audit_waiting_icon.svg',
        textColor: '#666'
      },
      uncheck: {
        text: '历史数据无法获取审核状态',
        icon: 'images/audit/icon_audit_waiting.png',
        activeIcon: 'images/audit/icon_audit_uncheck_icon.png',
        textColor: '#666'
      },
    }
    const state = reactive({
      // 审核流程集合
      auditList: []
    })
    const { skeletonLoading, skeletonRepeat, hideSkeleton, narrowSkeleton } = getSkeletonInstance({ skeletonRepeat: 3 })

    onMounted(() => {
      getAuditDetail({ beanId: props.beanId, id: props.id }).then(response => {
        narrowSkeleton()
        state.auditList = response.body.data.item
        hideSkeleton()
      })
    })
    const auditInfo = computed(() => {
      // return auditStrategy[props.checkstatus]
      let checkInfo = {}
      for (let k in auditStrategy) {
        if (auditStrategy[k].text === props.checkstatus) {
          checkInfo = auditStrategy[k]
          break
        }
      }
      return checkInfo
    })
    const activeColor = computed(() => {
      return (checkStatus) => {
        if (state.auditList.length > 0) {
          return auditStrategy[checkStatus].textColor
        }
        return ''
      }
    })
    const activeIcon = computed(() => {
      return (checkStatus) => {
        if (state.auditList.length > 0) {
          return auditStrategy[checkStatus].activeIcon
        }
        return ''
      }
    })
    return {
      auditInfo,
      ...toRefs(state),
      activeColor,
      activeIcon,
      skeletonLoading,
      skeletonRepeat
    }
  }
}
</script>
 
<style scoped>
.audit-top-wrap {
  height: 212px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
}
button.van-button.van-button--primary.van-button--normal.van-button--plain.van-button--hairline.van-hairline--surround.auditLog {
  height: 28px;
}
.auditStatus {
  font-size: 16px;
  color: #222;
  font-weight: bold;
}

.auditStatusDescription {
  color: #999;
  font-size: 14px;
}

.auditLog {
  position: absolute;
  top: 66px;
  right: 15px;
  color: #3975c6;
  font-size: 14px;
  font-weight: 400;
}

.split {
  height: 5px;
  background: #f7f7f7;
}
.audit-step-wrap {
  padding: 0px 15px;
}
.audit-step-title {
  line-height: 34px;
  color: #222;
  font-size: 14px;
  font-weight: bold;
}

.step-wrap {
  width: 90%;
  position: relative;
  min-height: 56px;
  padding: 22px 0 0 10px;
  border-bottom: 1px solid #f5f5f5;
}

.line {
  height: 65%;
  background: #ccc;
  position: absolute;
  width: 1px;
  top: 47px;
  left: -19px;
}

.line.last {
  width: 0;
}
.step {
  padding: 20px 0 0 50px;
  font-size: 15px;
}

.circle-container {
  position: absolute;
  left: -32px;
  top: 19px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
}
.title {
  color: #4e4e4e;
}

::v-deep(.van-skeleton__content) {
  padding: 12px 0 12px 0;
  margin-left: -60px;
}
</style>
